<nz-modal [(nzVisible)]="optionVisible" nzWidth="800px" nzTitle="选项关联" [nzMaskClosable]="false" (nzOnCancel)="optionVisible = false" (nzOnOk)="handleOk()">
  <ng-container *nzModalContent>
    <div class="option-box">
      <p class="option-title">{{ titleText }}</p>
      <nz-table #basicTable [nzData]="optionData" [nzFrontPagination]="false" [nzBordered]="true">
        <thead>
          <tr>
            <th nzAlign="center" width="20%">当前选项</th>
            <th nzAlign="center" width="80%">选项出现条件</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of basicTable.data; let i = index">
            <td nzAlign="center">{{ item.content }}</td>
            <td>
              <div class="option-condition align-items flex-between" *ngIf="controlId !== item.id; else elseOptionTemplate">
                <div class="option-control">{{ questionnaire.logicText(item.control) }}</div>
                <button nz-button nzType="link" nzSize="large" (click)="controlSet(item.id)">{{ item.control ? "修改" : "添加关联" }}</button>
              </div>
              <ng-template #elseOptionTemplate>
                <concern-select [options]="questions" [childId]="questionId" [optionId]="item.id" [control]="item.control" [showAdd]="false" #ConcernSelectComponent></concern-select>
                <div class="option-button">
                  <button nz-button nzType="primary" nzSize="small" (click)="determineConcern(i)">确定</button>
                  <button nz-button nzType="primary" nzSize="small" nzDanger style="margin-left: 10px" (click)="deleteConcern(i)">删除关联</button>
                </div>
              </ng-template>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </ng-container>
</nz-modal>
